<template>
  <section class="ces-table-page">
    <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if="isHandle">
      <el-button v-for="item in tableHandles" :key="item.label" :size="size || item.size" :type="item.type" :icon="item.icon" @click="item.handle(that)">
        {{ item.label }}
      </el-button>
    </section>
    <!-- 数据表格 -->
    <section class="ces-table">
      <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          :row-style="{height:'30px'}"
          :data="tableData"
          :size="size"
          :height="tableHeight"
          :show-header="showHeader"
          style="width: 100%;font-size: 14px;Color: #606266"
          :cell-style="changeCellStyle"
          :border="isBorder"
          :stripe="stripe"
          :select="select"
          @select-all="selectAll"
          @row-click="clickRow"
          @row-dblclick="dbClick"
          @clearSelection="clearSelect"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
          v-loading="loading"
          v-if="vif"
          :highlight-current-row="this.highlightCurrentRow"
          :defaultSelections="defaultSelections"
          ref="cesTable"
      >
        // 复选框
        <el-table-column v-if="isSelection" type="selection" :selectable="selectable" align="center"></el-table-column>
        // 单选按钮
        <el-table-column v-if="radioSelection" label="选择" width="60">
          <template slot-scope="scope">
            <el-radio class="radio custome-table-radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
        // 序号
        <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="60"></el-table-column>
        <!-- 数据栏 -->
        <template v-for="item in tableCols">
          <el-table-column
              :key="item.id"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :fixed="item.fixed"
              v-if="!item.hidden"
              :sortable="item.sortable"
              :render-header="item.require ? renderHeader : null"
              :show-overflow-tooltip="item.overflowTooltip != null ? overflowTooltip : true"
              style="font-weight:bold;"
          >
            <template slot-scope="scope">
              <template v-if="item.render">
                <ex-slot v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" />
                <!-- <span v-else>{{ scope.row[item.prop] || '-' }}</span> -->
              </template>

              <!-- 按钮-->
              <template v-if="item.type === 'Button'">
                <template v-for="btnItem in item.btnList">
                  <el-button
                      :key="btnItem.label"
                      :disabled="btnItem.disabled && btnItem.disabled(scope.row)"
                      :type="btnItem.type"
                      :size="size || btnItem.size"
                      :icon="btnItem.icon"
                      :class="btnItem.class"
                      v-show="handleBtnShow(that, scope.row, btnItem.label) && (btnItem.isShow ? btnItem.isShow(that, scope.row) : true)"
                      v-if="btnItem.vhas !== null"
                      v-bind:v-has="btnItem.vhas"
                      @click="btnItem.handle(that, scope.row)"
                  >
                    {{ btnItem.label }}
                  </el-button>
                </template>
              </template>
              <!-- html -->
              <span v-if="item.type === 'html'" v-html="item.html(scope.row)"></span>
              <!-- 下拉框 -->
              <el-select
                  v-if="item.type === 'select'"
                  v-model="scope.row[item.prop]"
                  :size="size || btn.size"
                  :props="item.props"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  @change="item.change && item.change(that, scope.row, scope.$index)"
              >
                <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
              </el-select>

              <!-- 单选 -->
              <el-radio-group
                  v-if="item.type === 'radio'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(that, scope.row)"
              >
                <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
              </el-radio-group>
              <!--文本域-->
              <el-input
                  v-if="item.type === 'textarea'"
                  v-model="scope.row[item.prop]"
                  autosize
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  placeholder="请输入内容"
                  @input="item.input && item.input(that, scope.row, scope.$index)"
              ></el-input>
              <!-- 复选框 -->
              <el-checkbox-group
                  v-if="item.type === 'checkbox'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(that, scope.row)"
              >
                <el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key="ra.value">{{ ra.label }}</el-checkbox>
              </el-checkbox-group>
              <!-- 评价 -->
              <el-rate
                  v-if="item.type === 'rate'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(scope.row)"
              ></el-rate>
              <!-- 开关 -->
              <el-switch
                  v-if="item.type === 'switch'"
                  v-model="scope.row[item.prop]"
                  :size="size || btn.size"
                  :active-value="item.values && item.values[0]"
                  :inactive-value="item.values && item.values[1]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  @change="item.change && item.change(scope.row)"
              ></el-switch>
              <!-- 图像 -->
              <img v-if="item.type === 'image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)" />
              <!-- 滑块 -->
              <el-slider
                  v-if="item.type === 'slider'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(scope.row)"
              ></el-slider>
              <!-- 默认 -->
              <span
                  v-if="!item.type"
                  :style="item.itemStyle && item.itemStyle(scope.row)"
                  :size="size || btn.size"
                  :class="item.itemClass && item.item.itemClass(scope.row)"
              >
                                {{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}
                            </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </section>
    <!-- 分页 -->
    <section class="ces-pagination" v-if="isPagination">
      <el-pagination
          style="display: flex;justify-content: center;height: 100%;align-items: center;margin-top: 20px;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total,sizes ,prev, pager, next, jumper"
          :page-size="tablePage.pageSize"
          :current-page="tablePage.pageNum"
          :total="tablePage.total"
      ></el-pagination>
    </section>
  </section>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    };
    if (data.props.column) {
      params.column = data.props.column;
    }
    return data.props.render(h, params);
  }
};
export default {
  components: {
    exSlot
  },
  props: {
    that: { type: Object, default: this },
    stripe: { type: Boolean, default: false },
    highlightCurrentRow: { type: Boolean, default: false },
    // 表格型号：mini,medium,small
    size: { type: String, default: 'medium' },
    tableHeight: { type: Number, default: 500 },
    isBorder: { type: Boolean, default: true },
    loading: { type: Boolean, default: false },
    /*v-if*/
    vif: { type: Boolean, default: true },
    showHeader: { type: Boolean, default: true },
    // 表格操作
    isHandle: { type: Boolean, default: false },
    tableHandles: { type: Array, default: () => [] },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    // 是否显示表格单选按钮
    radioSelection: { type: Boolean, default: false },
    overflowTooltip: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 属性来为 Table 中的某一行添加 class，表明该行处于某种状态
    tableRowClassName: { type: Function, default: () => Object },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    selectable: {
      type: Function,
      default: () => true
    },
    changeCellStyle: {
      type: Function,
      default: () => Object
    },
    // 是否显示分页
    isPagination: { type: Boolean, default: true },
    // 分页数据
    tablePage: {
      type: Object,
      default: () => ({ pageSize: 10, pageNum: 1, total: 0 })
    }
  },

  data() {
    return {
      templateSelection: '', // 单选数据
      multipleSelection: [] // 多行选中
    };
  },
  watch: {
    defaultSelections(val) {
      this.$nextTick(function() {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cesTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.cesTable.toggleRowSelection(val);
        }
      });
    }
  },
  methods: {
    // 表格勾选
    select(rows, row) {
      this.$emit('select', rows, row);
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows);
    },
    //清除选中
    clearSelect() {
      this.$refs.cesTable.clearSelection();
    },
    /*点击行选中勾选框*/
    clickRow(row) {
      this.templateSelection = this.tableData.indexOf(row);
      this.$refs.cesTable.toggleRowSelection(row);
      this.$emit('clickRow', row);
    },
    clearRadioSelection() {
      this.templateSelection = '';
    },
    dbClick(row, column, event) {
      this.$emit('dbClick', row, column, event);
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.$emit('handleSelectionChange', val);
    },
    /*getCurrentRow(val){ //获取选中数据this.templateSelection = row;
    debugger
      this.templateSelection = val
      this.$emit('getCurrentRow', val)
  },*/
    handleCurrentChange(val) {
      this.tablePage.pageNum = val;
      this.$emit('handleCurrentChange', val);
    },
    handleSizeChange(val) {
      this.tablePage.pageSize = val;
      this.$emit('handleSizeChange', val);
    },

    // tableRowClassName(row,index,selectedBpz053) {
    //     this.$emit('handleSizeChange', {row,index})
    //   if (row.bpz053.indexOf(selectedBpz053) > -1) {
    //           return 'hidden-row';
    //       }
    //       return '';
    //   },
    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', { class: 'ces-table-require' }, obj.column.label);
    },
    /*按钮是否显示*/
    handleBtnShow(that, row, label) {
      if (that.btnShow) {
        return that.btnShow(that, row, label);
      }
      return true;
    }
  }
};
</script>
<style>
.ces-table-require::before {
  content: '*';
  color: red;
}

.el-table__row td {
  text-align: center;
}

.has-gutter tr th {
  text-align: center;
}

. el-table__body-wrapper {
  height: 500px !important;
}

.el-table--enable-row-hover .el-table__body tr:hover {
  cursor: pointer;
}

.el-table tr {
  cursor: pointer;
}

.custome-table-radio .el-radio__label {
  display: none;
}

.el-table .success-row {
  background: #a9ffd4;
}
.el-table .warning-row {
  background: #fffdb7;
}

.el-table .error-row {
  background: #ffa9cf;
}
</style>
